<template>
	<div class="home">
		<div class="header">
			<div class="header-logo"><img src="../assets/images/logo.png" /></div>
			<div class="search"> <img src="../assets/images/sousuo.png" /></div>
		</div>
		<!-- 轮播 -->
		<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
			<div v-for="(item,index) in lisArr" :key='item'>
				<van-swipe-item><img :src="item"></van-swipe-item>
			</div>

		</van-swipe>

		<!-- 热门推荐 -->
		<div class="tuijian">
			<div class="tis">
				<div class="rm">热门推荐</div>
				<div class="gengduo">查看更多></div>
			</div>
			<!-- 商品内容 -->
			<div class="shangping">
				<div class="shangping-item" @click="shangBtn(item.id)" v-for="(item,index) in arrItem" :key="index" >
					<div class="item-img"><img :src="item.image"/></div>
					<div class="item-biaot">
						<div class="bt">{{item.title}}</div>
						<div class="rens">235人购买</div>
						<div class="jiege">￥{{item.price}}</div>
					</div>
				</div>
			
			</div>
			<div class="foot">---没有更多商品了---</div>
		</div>
		
		<!-- 底部导航 -->
		<tab-bar>
			<tab-bar-item path="/home">
				<img src="../assets/images/tabbar/home.png" slot="item-icon" />
				<img src="../assets/images/tabbar/home_selected.png" slot="item-select-icon" />
				<div slot="item-text">首页</div>
			</tab-bar-item>
			<tab-bar-item path="/about">
				<img src="../assets/images/tabbar/index.png" slot="item-icon" />
				<img src="../assets/images/tabbar/index_selected.png" slot="item-select-icon" />
				<div slot="item-text">购物车</div>
			</tab-bar-item>
		
			<tab-bar-item path="/order">
				<img src="../assets/images/tabbar/order.png" slot="item-icon" />
				<img src="../assets/images/tabbar/order_selected.png" slot="item-select-icon" />
				<div slot="item-text">订单</div>
			</tab-bar-item>
		
			<tab-bar-item path="/my">
				<img src="../assets/images/tabbar/my.png" slot="item-icon" />
				<img src="../assets/images/tabbar/my_selected.png" slot="item-select-icon" />
				<div slot="item-text">我的</div>
			</tab-bar-item>
		</tab-bar>
	
	</div>
</template>

<script>
	import {
		Swipe,
		SwipeItem
	} from 'vant';
	// 引入tabbar组件
	import TabBar from '../components/tabbar/TabBar.vue'
	import TabBarItem from '../components/tabbar/TabBarItem.vue'
	export default {
		data() {
			return {
				lisArr: [require('../assets/images/home/2021.png'), require('../assets/images/home/2022.png'), require(
					'../assets/images/home/2023.png')],
				arrItem:[],
				idxs:null,
			}
		},
		created() {
		  	this.$get(this.$API.PRODUCTS_LIST).then(res=>{	
				console.log(res)
					for(let i=1;i<res.data.length;i++){
						 this.arrItem.push(res.data[i])
					} 
				
			}).catch(err=>{
				console.log(err)
			})
		//   this.$get(this.$api.PRODUCTS_WISHLIST,{
		// 	  userid:this.$store.state.nameId.userid
		//   }).then(res=>{
		// 	console.log(res)
		//   })
		},
		components: {
			[Swipe.name]: Swipe,
			[SwipeItem.name]: SwipeItem,
			TabBar,
			TabBarItem
		},
		methods:{
			shangBtn(idx){
				this.$router.push({name:'details',params:{id:idx}})
				console.log(idx.id)
			}
		},
		
	
	}
</script>

<style lang="less" scoped>
	@width: 100vw;
	@display: flex;
	@margin: 0 auto;
	@wid90: 90vw;

	.home {
		width: @width;
		height: 100vh;
		background-color: #FCFCFC;
		box-sizing: border-box;
	}

	.header {
		width: @width;
		height: 13vw;
		background: #ffffff;
		display: @display;
		box-shadow:-1px 0px 0.5px #999999;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		box-sizing: border-box;
	}

	.header-logo {
		flex: 5;
		height: 15vw;
		display: @display;
		align-items: center;
	}

	.header-logo>img {
		width: 100px;
		height: 10vw;
		margin-left: 20px;
	}

	.search {
		flex: 1;
		display: @display;
		align-items: center;
	}

	.search>img {
		margin-left: 15px;
		width: 28px;
		height: 28px;
	}

	.my-swipe {
		width: @wid90;
		margin: @margin;
		border-radius: 5px;
		margin-top: 60px;
		height: 24vh;
	}

	.my-swipe .van-swipe-item {
		color: #fff;
		font-size: 20px;
		line-height: 150px;
		text-align: center;
	}

	/* 热门推荐 */
	.tuijian {
		width: @wid90;
		margin: @margin;
		margin-top: 25px;
		padding-bottom: 80px;
		box-sizing: border-box;
	}

	.tuijian .tis {
		height: 5vh;
		display: @display;
		align-items: center;
		justify-content: space-between;
	}

	.tuijian .tis .rm {
		font-weight: bold;
	}

	.tuijian .tis .gengduo {
		font-size: 12px;
		color: #999999;
	}

	//商品内容
	.shangping {
		width: @wid90;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding-bottom: 30px;
	}

	.shangping-item {
		width: 42vw;
		height:35vh;
		// background-color: blue;
        display: @display;
		flex-direction: column;
		margin-top: 10px;
		margin-bottom: 10px;
		.item-img {
			width: 42vw;
			flex:3;
			// border: 1px solid red;
			border-radius: 5px;	
		   img{
			  width: 100%;
			  height: 100%;
			 border-radius: 5px;
			 }
		}
		.item-biaot{
			flex: 1;
		   .bt{
			   font-size: 15px;
			   margin-top: 5px;
			   margin-left: 3px;
		   }
		   .rens{
			   font-size:12px;
			   margin-top: 5px;
			   color: #999999;
			   margin-left: 3px;
		   }
		   .jiege{
			   font-size: 15px;
			   color: #A8896D;
			   margin-top: 5px;
		   }
		}

	}
	.foot{
    font-size: 13px;
	text-align: center;
	color: #999999;
	
	}
</style>
